<template>
  <div>
    <el-time-select
      v-model="startTime"
      placeholder="起始时间"
      :picker-options="{
        start: '00:00',
        step: '01:00',
        end: '24:00',
      }"
    />
    <el-time-select
      v-model="endTime"
      placeholder="结束时间"
      :picker-options="{
        start: '00:00',
        step: '01:00',
        end: '24:00',
        minTime: startTime,
      }"
    />
  </div>
</template>

<script>
export default {
  name: 'TimeSelect',
  props: {
    value: {}
  },
  data() {
    return {
      startTime: '',
      endTime: ''
    }
  },
  watch: {
    startTime: function(val) {
      this.$emit('input', [val, this.endTime].join(','))
    },
    endTime: function(val) {
      this.$emit('input', [this.startTime, val].join(','))
    }
  },
  beforeMount() {
    // 接收 v-model 数据
    if (this.value) {
      this.startTime = this.value.split(',')[0]
      this.endTime = this.value.split(',')[1]
    }
  }
}
</script>

<style scoped></style>
